<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TodoView</title>

		<script type="text/montage-serialization">
		{
			"owner": {
				"properties": {
					"element": {"#": "todoView"},
					"editInput": {"@": "editInput"}
				}
			},

			"todoTitle": {
				"prototype": "montage/ui/text.reel",
				"properties": {
					"element": {"#": "todoTitle"}
				},
				"bindings": {
					"value": {"<-": "@owner.todo.title"}
				}
			},

			"todoCompletedCheckbox": {
				"prototype": "native/ui/input-checkbox.reel",
				"properties": {
					"element": {"#": "todoCompletedCheckbox"}
				},
				"bindings": {
					"checked": {"<->": "@owner.todo.completed"}
				}
			},

			"destroyButton": {
				"prototype": "native/ui/button.reel",
				"properties": {
					"element": {"#": "destroyButton"}
				},
				"listeners": [
					{
						"type": "action",
						"listener": {"@": "owner"},
						"capture": true
					}
				]
			},

			"editInput": {
				"prototype": "native/ui/input-text.reel",
				"properties": {
					"element": {"#": "edit-input"}
				},
				"bindings": {
					"value": {"<-": "@owner.todo.title"}
				}
			}
		}
		</script>
	</head>
	<body>
		<li data-montage-id="todoView">
			<div class="view">
				<input type="checkbox" data-montage-id="todoCompletedCheckbox" class="toggle">
				<label data-montage-id="todoTitle"></label>
				<button data-montage-id="destroyButton" class="destroy"></button>
			</div>
			<form data-montage-id="edit">
				<input type="text" data-montage-id="edit-input" class="edit" value="Rule the web">
			</form>
		</li>
	</body>
</html>